<template>
  <div class="container clearfix">
    <scroll-view scroll-y
                 scroll-with-animation
                 style="height:100%"
                 :scroll-into-view="el_id">
      <div class="content clearfix"
           v-if="status!=2"
           :style="{'backgroundImage':'url('+(img_base+page_data.bg_img)+')'}">
        <div class="rule-btn"
             @tap.stop="show_rule">
          规则
        </div>
        <!-- 滚动通知条 -->
        <i-notice-bar background-color="#ffffff"
                      :i-class="'notice-bar'"
                      v-if="notice_arr.length>0"
                      loop>
          <ul class="notice-list clearfix">
            <li class="notice-item"
                v-for="(item, index) in notice_arr"
                :key="index">
              <div class="icon">
                <img :src="img_url+'/mp_3.2.2/通知.png'"
                     v-if="img_url"
                     alt=""
                     class="img">
              </div>
              <div class="msg">
                {{item.str}}
              </div>
            </li>
          </ul>
        </i-notice-bar>
        <!-- 分享栏 -->
        <div class="share-bar">
          <div class="share-title">
            <img :src="img_url+'/mp_3.2.2/标题栏3.png'"
                 v-if="img_url"
                 mode="widthFix"
                 alt=""
                 class="img">

          </div>
          <div class="btns">
            <!-- 分享微信好友 -->
            <div class="share-btn">
              <button open-type="share"
                      class="real-btn">
              </button>
              <img :src="img_url+'/mp_3.2.2/微信.png'"
                   v-if="img_url"
                   mode="widthFix"
                   alt=""
                   class="share-logo">

            </div>
            <!-- 保存海报 -->
            <div class="share-btn"
                 @tap="show_posterbar()">
              <img :src="img_url+'/mp_3.2.2/生成海报.png'"
                   v-if="img_url"
                   mode="widthFix"
                   alt=""
                   class="share-logo">

            </div>
          </div>

        </div>
        <!-- 邀请记录 -->
        <div class="section-title">
          <img :src="img_url+'/mp_3.2.2/标题框1.png'"
               v-if="img_url"
               mode="widthFix"
               alt=""
               class="img">
        </div>
        <div class="invit-node">
          <div class="empty"
               v-if="invite_arr.length == 0">
            还没有获得免单奖励，<br />
            快邀请好友一起变美
          </div>
          <swiper :indicator-dots="false"
                  autoplay
                  circular
                  vertical
                  :display-multiple-items="invite_arr.length>=6?6:invite_arr.length"
                  :interval="1000"
                  v-if="invite_arr.length > 0">
            <block v-for="(item, index) in invite_arr"
                   :key="index">
              <swiper-item>
                <div class="list-item">
                  <div class="user-logo">
                    <img :src="img_base+item.headimgurl"
                         v-if="img_base&&item.headimgurl"
                         alt=""
                         class="img">
                  </div>
                  <div class="user-tel">
                    {{item.user_tel}}
                  </div>
                  <div class="user-award">
                    <div class="coin gold">
                      <img :src="img_url+'/mp_3.2.2/金.png'"
                           v-if="img_url"
                           alt=""
                           class="icon">
                      <div class="num">+{{item.gold}}</div>
                    </div>
                    <div class="coin silver">
                      <img :src="img_url+'/mp_3.2.2/银.png'"
                           v-if="img_url"
                           alt=""
                           class="icon">
                      <div class="num">+{{item.silver}}</div>
                    </div>
                  </div>
                  <div class="award-status">
                    <img :src="img_url+'/mp_3.2.2/icon_share_coupon_use.png'"
                         v-if="img_url&&(item.status==0||item.status==1)"
                         alt=""
                         class="icon">
                    <img :src="img_url+'/mp_3.2.2/icon_share_coupon_nouse.png'"
                         v-if="img_url&&item.status==2"
                         alt=""
                         class="icon">
                    <div class="status-msg">
                      {{item.status==0?'未使用':""}}
                      {{item.status==1?'已使用':""}}
                      {{item.status==2?'已失效':""}}
                    </div>
                  </div>
                </div>
              </swiper-item>
            </block>
          </swiper>

        </div>
        <!-- 规则说明 -->
        <div class="section-title">
          <img :src="img_url+'/mp_3.2.2/标题框2.png'"
               v-if="img_url"
               mode="widthFix"
               alt=""
               class="img">
        </div>
        <div class="rule"
             id="rule">
          <rich-text type="node"
                     :nodes="page_data.rule_text"></rich-text>
        </div>
      </div>
      <div class="fail-load"
           v-if="status==2">
        <img :src="img_url+'/mp_3.2.2/empty.png'"
             v-if="img_url"
             mode="widthFix"
             alt=""
             class="empty">
        <div class="msg">
          很抱歉，活动已结束
        </div>
      </div>
      <!-- 分享海报框 -->
      <div class="poster-model"
           v-if="show_poster"
           @tap="hide_posterbar()">
        <div class="poster-bar">
          <div class="swiper-bar">
            <swiper :current="current_poster"
                    @change="tiggle_poster">
              <block v-for="(item, index) in poster_arr"
                     :key="index">
                <swiper-item>
                  <div class="poster-pic">
                    <img :src="item"
                         v-if="item"
                         mode="widthFix"
                         alt=""
                         class="img">
                  </div>

                </swiper-item>
              </block>
            </swiper>
          </div>
          <ul class="slider">
            <li class="slider-item"
                :class="{'active':current_poster==index}"
                v-for="(item, index) in poster_arr"
                :key="index"></li>
          </ul>
        </div>
        <div class="bottom-bar">
          <!-- 分享微信好友 -->
          <div class="share-btn">
            <button open-type="share"
                    class="real-btn">
            </button>
            <img :src="img_url+'/mp_3.2.2/wx_share.png'"
                 v-if="img_url"
                 mode="widthFix"
                 alt=""
                 class="share-logo">
            <div class="btn-msg">
              微信好友
            </div>
          </div>
          <!-- 保存海报 -->
          <div class="share-btn"
               @tap.stop="save_poster()">
            <img :src="img_url+'/mp_3.2.2/download.png'"
                 v-if="img_url"
                 mode="widthFix"
                 alt=""
                 class="share-logo">
            <div class="btn-msg">
              保存此图片
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      img_base: common.image_response,
      img_url: common.image_resource,
      bgi: "https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.2.2/首页.png",
      act_id: 1,
      show_poster: false,
      page_data: {},
      share_data: {},
      poster_arr: [],
      notice_arr: [],
      invite_arr: [],
      current_poster: 0,
      el_id: "",
      status: 0
    };
  },
  onLoad (options) {
    if (options.act_id) {
      this.act_id = options.act_id
    }
    this.get_data()
    this.get_detail()
    this.get_poster()
  },
  onShow () {
    let that = this
    this.get_data()
    this.get_detail()
    this.get_poster()
  },
  methods: {
    get_data () {
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("api/act/activity/index", {
        activity_id: this.act_id
      }, result => {
        let res = result.data
        console.log(res);
        wx.hideLoading();
        if (res.status_code == 0) {
          this.share_data = res.data
          //   处理公告栏
          {
            let notice_list = res.data.notice
            notice_list.forEach(item => {
              if (item.username) {
                item.str = `手机尾号${item.username.substr(7, 4)}用户已邀请${item.count}人，获得大礼`
              } else {
                item.str = `手机尾号****用户已邀请${item.count || 0}人，获得大礼`
              }

            });
            this.notice_arr = notice_list
          }
          //   处理奖励列表
          {
            let award_list = res.data.user
            award_list.forEach(item => {
              item.user_tel = `${item.username.substr(0, 4)}****${item.username.substr(7, 4)}`

            });
            this.invite_arr = award_list
          }
        }
      })
    },
    get_detail () {
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("api/act/activity/detail", {
        activity_id: this.act_id
      }, result => {
        let res = result.data
        wx.hideLoading();
        if (res.status_code == 0) {
          this.page_data = res.data
          this.status = res.data.status
          wx.setNavigationBarTitle({ title: res.data.activity_name });
        }
      })
    },
    get_poster () {
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("api/act/activity/poster_list", {
        activity_id: this.act_id
      }, result => {
        let res = result.data
        wx.hideLoading();
        if (res.status_code == 0) {
          this.poster_arr = res.data
        }
      })
    },
    show_posterbar () {
      this.show_poster = true
    },
    hide_posterbar () {
      this.show_poster = false
    },
    tiggle_poster (e) {
      this.current_poster = e.mp.detail.current
    },
    save_poster () {
      let poster = this.poster_arr[this.current_poster]
      console.log(poster);
      let that = this
      wx.downloadFile({
        url: poster, // 下载资源的 url
        success: result => {
          wx.saveImageToPhotosAlbum({
            filePath: result.tempFilePath, //图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径,
            success: res => {
              wx.showToast({
                title: '海报保存成功', //提示的内容,
                icon: 'success', //图标,
                duration: 1500, //延迟时间,
                mask: true, //显示透明蒙层，防止触摸穿透,
                success: res => {
                  that.show_poster = false
                }
              });
            },
            fail: (err) => {
              console.log(err);
              wx.showToast({
                title: "海报保存失败", //提示的内容,
                icon: 'none', //图标,
                duration: 1500, //延迟时间,
                mask: true, //显示透明蒙层，防止触摸穿透,
                success: res => { }
              });
            },
            complete: () => { }
          });
        },
        fail: (err) => {
          console.log(err);
          wx.showToast({
            title: '海报下载失败', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        },
        complete: () => { }
      });

    },
    show_rule () {
      // 滚动到规则弹窗
      let that = this
      this.el_id = "rule"
      setTimeout(() => {
        that.el_id = ""
      }, 100);
    }
  },
  onShareAppMessage (options) {
    let that = this
    let user_id = wx.getStorageSync('user_id');
    let share_data = {
      title: this.page_data.mini_word,
      path: `pages/package_main/entry/main?t=35&tg=${that.act_id || 0}&sid=${user_id}`,
      imageUrl: this.img_base + this.page_data.mini_img,
      success: res => {
        wx.showToast({
          title: "分享成功", //提示的内容,
          icon: "none", //图标,
          duration: 2000, //延迟时间,
          mask: false //显示透明蒙层，防止触摸穿透,
        });
      },
      fail: () => {
        wx.showToast({
          title: "分享失败了，请稍后重试哟", //提示的内容,
          icon: "none", //图标,
          duration: 2000, //延迟时间,
          mask: false //显示透明蒙层，防止触摸穿透,
        });
      },
      complete: () => { }
    };
    return share_data
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    .rule-btn {
      width: 47px;
      height: 25px;
      background: rgba(255, 255, 255, 0.41);
      font-size: 14px;
      font-family: "PingFang";
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0px 1px 2px rgba(255, 151, 149, 0.7);
      border-radius: 12px 0 0 12px;
      line-height: 25px;
      text-align: center;
      position: absolute;
      right: 0;
      top: 55px;
    }
    .notice-bar {
      width: 100%;
      height: 40px;

      .notice-list {
        white-space: nowrap;
        width: auto;
        display: block;
        .notice-item {
          margin-left: 20.5px;
          display: inline-block;
          .icon {
            width: 18px;
            height: 12px;
            margin-right: 4px;
            display: inline-block;
            vertical-align: middle;
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .msg {
            font-size: 14px;
            font-family: "PingFang";
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
            opacity: 0.6;
            line-height: 40px;
            display: inline-block;
            vertical-align: middle;
          }
          &:last-of-type {
            margin-right: 30px;
          }
        }
      }
    }
    .share-bar {
      width: 89.5%;
      padding: 12px 0;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      margin: 357px auto 0;
      .share-title {
        width: 220px;
        margin: 0 auto 15px;
        .img {
          width: 100%;
          display: block;
        }
      }
      .btns {
        width: 100%;
        display: flex;
        justify-content: space-around;
        .share-btn {
          width: 55px;
          position: relative;
          .share-logo {
            width: 100%;
          }
          .real-btn {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: 10;
          }
        }
      }
    }
    .section-title {
      width: 142px;
      margin: 20px auto 15px;
      .img {
        width: 100%;
        display: block;
      }
    }
    .invit-node {
      width: 89.5%;
      height: 249px;
      background: rgba(255, 255, 255, 1);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 15px 0px rgba(137, 30, 35, 0.6),
        0px 0px 30px 0px rgba(255, 230, 198, 0.65) inset;
      border-radius: 5px;
      padding: 10px 8px;
      box-sizing: border-box;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      position: relative;
      .list-item {
        height: 34px;
        background: rgba(237, 237, 237, 0.66);
        border-radius: 10px;
        position: relative;
        .user-logo {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          display: inline-block;
          vertical-align: middle;
          margin-right: 12px;
          margin-left: 7px;
          .img{
              width: 100%;
              height: 100%;
              display: block;
              border-radius: 50%;
          }
        }
        .user-tel {
          font-size: 14px;
          line-height: 34px;
          font-family: "PingFang";
          font-weight: 500;
          color: rgba(0, 0, 0, 0.41);
          display: inline-block;
          vertical-align: middle;
        }
        .user-award {
          display: inline-block;
          vertical-align: middle;
          margin-left: 19.5px;
          .coin {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            .icon {
              width: 16px;
              height: 16px;
              display: inline-block;
              vertical-align: middle;
              margin-right: 4.5px;
            }
            .num {
              font-size: 14px;
              font-family: "PingFang";
              font-weight: 500;
              display: inline-block;
              vertical-align: middle;
            }
            &.gold {
              color: rgba(252, 229, 84, 1);
            }
            &.silver {
              color: rgba(178, 196, 202, 1);
            }
          }
        }
        .award-status {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          .icon {
            width: 15px;
            height: 12px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 3.5px;
          }
          .status-msg {
            font-size: 12px;
            font-family: "PingFang";
            font-weight: 500;
            color: rgba(0, 0, 0, 0.61);
            line-height: 18px;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
      .empty {
        font-size: 16px;
        font-family: "PingFang";
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        line-height: 20px;
        opacity: 0.4;
        text-align: left;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      swiper {
        flex: 1;
        position: relative;
      }
    }
    .rule {
      width: 89.5%;
      height: 294px;
      overflow-y: auto;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      margin: 0 auto 18px;
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .fail-load {
    position: absolute;
    top: 184px;
    left: 50%;
    transform: translateX(-50%);
    .empty {
      width: 170px;
      height: 170px;
      display: block;
    }
    .msg {
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin-top: 4px;
      text-align: center;
    }
  }
  .poster-model {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.71);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    .poster-bar {
      flex: 1;
      margin-top: 80px;
      position: relative;
      display: flex;
      flex-direction: column;
      .swiper-bar {
        margin: 0 27px 39px;
        flex: 1;
        ._swiper-item {
          overflow-y: auto !important;
        }
        .poster-pic {
          width: 100%;
        }
        swiper {
          height: 100% !important;
        }
      }
      .slider {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        .slider-item {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: rgba(183, 183, 183, 1);
          margin: 0 4px;
          display: inline-block;
          vertical-align: middle;
          transition: all 0.5s;
          &.active {
            width: 18px;
            height: 5px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
          }
        }
      }
    }
    .bottom-bar {
      margin: 30px 66px 66px;
      display: flex;
      justify-content: space-around;
      .share-btn {
        width: 55px;
        position: relative;
        .share-logo {
          width: 100%;
        }
        .btn-msg {
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          margin-top: 1px;
          white-space: nowrap;
        }
        .real-btn {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          z-index: 10;
        }
      }
    }
  }
}
</style>
<style lang="less">
.notice-bar {
  background: rgba(255, 255, 255, 0.31) !important;
}
</style>


